<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<view class="title-section">
				<text class="page-title">工厂维度报表</text>
				<text class="page-subtitle">各工厂用电量对比分析</text>
			</view>
			<view class="header-decoration"></view>
		</view>

		<!-- 月份选择器 -->
		<view class="month-selector">
			<view class="selector-card">
				<view class="selector-header">
					<view class="selector-icon">📅</view>
					<text class="selector-title">选择月份</text>
				</view>
				<picker mode="date" fields="month" :value="selectedMonth" @change="onMonthChange" class="month-picker">
					<view class="selected-month">
						<text class="month-text">{{ formatMonth(selectedMonth) }}</text>
						<text class="arrow-down">▼</text>
					</view>
				</picker>
			</view>
		</view>

		<!-- 统计概览 -->
		<view class="overview-section">
			<view class="overview-card total">
				<view class="card-content">
					<view class="card-icon">⚡</view>
					<view class="card-info">
						<text class="card-label">总用电量</text>
						<text class="card-value">{{ totalPower.toLocaleString() }}</text>
						<text class="card-unit">KWH</text>
					</view>
				</view>
			</view>
			<view class="overview-card average">
				<view class="card-content">
					<view class="card-icon">📊</view>
					<view class="card-info">
						<text class="card-label">平均用电</text>
						<text class="card-value">{{ averagePower.toLocaleString() }}</text>
						<text class="card-unit">KWH</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-section">
			<view class="chart-container">
				<view class="chart-header">
					<view class="chart-title-wrapper">
						<text class="chart-title">工厂用电量对比</text>
						<text class="chart-subtitle">{{ formatMonth(selectedMonth) }}</text>
					</view>
				</view>
				<uni-chart class="chart" :option="chartOption" />
				<view class="chart-legend">
					<view class="legend-item production">
						<view class="legend-dot"></view>
						<text class="legend-text">生产用电</text>
					</view>
					<view class="legend-item non-production">
						<view class="legend-dot"></view>
						<text class="legend-text">非生产用电</text>
					</view>
					<view class="legend-item auxiliary">
						<view class="legend-dot"></view>
						<text class="legend-text">辅助用电</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedMonth: new Date().toISOString().slice(0, 7),
				totalPower: 0,
				averagePower: 0,
				chartOption: {
					title: {
						show: false
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							shadowStyle: {
								color: 'rgba(0,122,255,0.1)'
							}
						},
						confine: true,
						backgroundColor: 'rgba(255,255,255,0.95)',
						borderColor: '#E5E5E5',
						borderWidth: 1,
						textStyle: {
							color: '#333',
							fontSize: 12
						},
						formatter: function(params) {
							let result = params[0].name + '<br/>';
							let total = 0;
							params.forEach(param => {
								total += param.value;
								result += `<span style="color:${param.color}">●</span> ${param.seriesName}: ${param.value} KWH<br/>`;
							});
							result += `<strong>总计: ${total} KWH</strong>`;
							return result;
						}
					},
					legend: {
						show: false
					},
					grid: {
						left: '3%',
						right: '4%',
						top: '8%',
						bottom: '15%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							color: '#666',
							fontSize: 11,
							rotate: 30,
							margin: 15
						},
						axisLine: {
							lineStyle: {
								color: '#E5E5E5'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							color: '#666',
							fontSize: 11,
							formatter: '{value}'
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#F0F0F0',
								type: 'dashed'
							}
						}
					},
					series: [
						{
							name: '生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#007AFF',
							data: [],
							itemStyle: {
								borderRadius: [0, 0, 0, 0]
							}
						},
						{
							name: '非生产用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#34C759',
							data: [],
							itemStyle: {
								borderRadius: [0, 0, 0, 0]
							}
						},
						{
							name: '辅助用电',
							type: 'bar',
							stack: 'total',
							barWidth: '50%',
							color: '#FF9500',
							data: [],
							itemStyle: {
								borderRadius: [3, 3, 0, 0]
							}
						}
					]
				}
			}
		},
		onLoad(option) {
			const title = option.name;
			if (title) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				currentPage.$page.meta.navigationBar.titleText = title;
			}
			this.generateData();
		},
		methods: {
			// 月份选择事件
			onMonthChange(e) {
				this.selectedMonth = e.detail.value;
				console.log('选择的月份:', this.selectedMonth);
				this.generateData();
			},
			
			// 格式化月份显示
			formatMonth(monthStr) {
				if (!monthStr) return '';
				const [year, month] = monthStr.split('-');
				return `${year}年${month}月`;
			},
			
			// 生成模拟数据
			generateData() {
				const [year, month] = this.selectedMonth.split('-');
				const dateSeed = parseInt(year) * 100 + parseInt(month);
				
				const factories = [
					'天津安闻', '河北安闻', '浙江安闻', '广东安闻', 
					'上海安闻', '东莞安海斯', '廊坊安海斯'
				];
				
				const factoryNames = [];
				const productionData = [];
				const nonProductionData = [];
				const auxiliaryData = [];
				
				let totalPower = 0;
				
				factories.forEach((factory, index) => {
					// 根据月份和工厂生成不同数据
					const factorySeed = dateSeed + index * 17;
					const production = Math.floor(600 + (factorySeed % 400) * 1.5 + Math.random() * 300);
					const nonProduction = Math.floor(200 + (factorySeed % 200) * 1.2 + Math.random() * 180);
					const auxiliary = Math.floor(150 + (factorySeed % 150) * 1.1 + Math.random() * 120);
					const total = production + nonProduction + auxiliary;
					
					factoryNames.push(factory);
					productionData.push(production);
					nonProductionData.push(nonProduction);
					auxiliaryData.push(auxiliary);
					
					totalPower += total;
				});
				
				// 更新统计数据
				this.totalPower = totalPower;
				this.averagePower = Math.floor(totalPower / factories.length);
				
				// 更新图表数据
				this.chartOption.xAxis.data = factoryNames;
				this.chartOption.series[0].data = productionData;
				this.chartOption.series[1].data = nonProductionData;
				this.chartOption.series[2].data = auxiliaryData;
			}
		}
	}
</script>

<style scoped>
.container {
	padding: 20rpx;
	background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
	min-height: 100vh;
}

/* 页面标题 */
.page-header {
	position: relative;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	text-align: center;
	overflow: hidden;
}

.title-section {
	z-index: 2;
	position: relative;
}

.page-title {
	display: block;
	font-size: 48rpx;
	font-weight: 800;
	color: #1a1a1a;
	margin-bottom: 12rpx;
	letter-spacing: 2rpx;
}

.page-subtitle {
	display: block;
	font-size: 26rpx;
	color: #666;
	opacity: 0.9;
	font-weight: 500;
}

.header-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(52, 199, 89, 0.05) 100%);
	border-radius: 20rpx;
	z-index: 1;
}

/* 月份选择器 */
.month-selector {
	margin-bottom: 30rpx;
}

.selector-card {
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid rgba(0, 122, 255, 0.1);
}

.selector-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.selector-icon {
	font-size: 36rpx;
	margin-right: 16rpx;
}

.selector-title {
	font-size: 32rpx;
	font-weight: 700;
	color: #1a1a1a;
}

.month-picker {
	width: 100%;
}

.selected-month {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
	border-radius: 16rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 122, 255, 0.3);
}

.month-text {
	font-size: 32rpx;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 1rpx;
}

.arrow-down {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

/* 统计概览 */
.overview-section {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.overview-card {
	flex: 1;
	padding: 30rpx;
	border-radius: 20rpx;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.overview-card.total {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.overview-card.average {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-content {
	display: flex;
	align-items: center;
	z-index: 2;
	position: relative;
}

.card-icon {
	font-size: 56rpx;
	margin-right: 20rpx;
	opacity: 0.9;
}

.card-info {
	flex: 1;
}

.card-label {
	display: block;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 8rpx;
	font-weight: 500;
}

.card-value {
	display: block;
	font-size: 40rpx;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 4rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.card-unit {
	display: block;
	font-size: 20rpx;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}

/* 图表区域 */
.chart-section {
	margin-bottom: 30rpx;
}

.chart-container {
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
}

.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 30rpx;
	flex-wrap: wrap;
	gap: 20rpx;
}

.chart-title-wrapper {
	flex: 1;
	min-width: 200rpx;
}

.chart-title {
	display: block;
	font-size: 36rpx;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 8rpx;
}

.chart-subtitle {
	display: block;
	font-size: 24rpx;
	color: #666;
	background: #f3f4f6;
	padding: 8rpx 16rpx;
	border-radius: 12rpx;
	display: inline-block;
}

.chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
	margin-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.legend-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
}

.legend-item.production .legend-dot {
	background: #007AFF;
}

.legend-item.non-production .legend-dot {
	background: #34C759;
}

.legend-item.auxiliary .legend-dot {
	background: #FF9500;
}

.legend-text {
	font-size: 22rpx;
	color: #666;
	font-weight: 500;
}

.chart {
	height: 600rpx;
	width: 100%;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.container {
		padding: 15rpx;
	}
	
	.overview-section {
		flex-direction: column;
	}
	
	.chart-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.chart-legend {
		justify-content: flex-start;
	}
}
</style>